<template>
  <div>
    <el-row :gutter="20" class="search-row">
      <el-col :span="6">
        <label style="font-weight: bold;">请输入用户名</label>
      </el-col>
      <el-col :span="10">
        <el-input v-model="searchName" placeholder="输入用户名进行搜索" clearable @clear="handleClear"/>
      </el-col>
      <el-col :span="8">
        <el-button type="danger" @click="loadOrderList()" round>搜索</el-button>
      </el-col>
    </el-row>

    <el-table :data="orderList" stripe border show-overflow-tooltip table-layout="fixed">
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column prop="userName" label="订单用户"></el-table-column>
      <el-table-column prop="driverName" label="订单司机"></el-table-column>
      <el-table-column prop="orderTime" label="订单创建时间">
        <template #default="scope">
          {{ formatTimestamp(scope.row.orderTime) }}
        </template>
      </el-table-column>
      <el-table-column align="right" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="showOrderDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[5, 10, 20]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

      <!-- 订单详情对话框 -->
      <el-dialog v-model="detailDialogVisible" title="订单详情" label-width="auto" style="max-width: 800px">
        <el-form :model="orderDetail" class="order-detail-form">
          <el-form-item label="订单编号">
            <el-input v-model="orderDetail.orderId" disabled />
          </el-form-item>
          <el-form-item label="订单创建时间">
            <el-input v-model="orderDetail.orderTime" disabled />
          </el-form-item>
          <el-form-item label="订单用户">
            <el-input v-model="orderDetail.userName" disabled />
          </el-form-item>
          <el-form-item label="订单司机">
            <el-input v-model="orderDetail.driverName" disabled />
          </el-form-item>
          <el-form-item label="起点位置">
            <el-input v-model="orderDetail.startLocation" disabled />
          </el-form-item>
          <el-form-item label="终点位置">
            <el-input v-model="orderDetail.endLocation" disabled />
          </el-form-item>
          <el-form-item label="行驶距离（km）">
            <el-input v-model="orderDetail.distance" disabled />
          </el-form-item>
          <el-form-item label="行驶时长（min）">
            <el-input v-model="orderDetail.duration" disabled />
          </el-form-item>
          <el-form-item label="订单费用（元）">
            <el-input v-model="orderDetail.fee" disabled />
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-form-item label="车牌号码" style="margin-bottom: 0">
              <el-input v-model="orderDetail.vehiclePlate" disabled />
            </el-form-item>
            <el-form-item label="车辆型号" style="margin-bottom: 0">
              <el-input v-model="orderDetail.vehicleModel" disabled />
            </el-form-item>
            <el-form-item label="车辆类型">
              <el-input v-model="orderDetail.vehicleType" disabled />
            </el-form-item>
          </el-form-item>
          <el-form-item label="司机评分">
            <el-input v-model="orderDetail.driverRating" disabled />
          </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="detailDialogVisible = false">关闭</el-button>
          </template>
      </el-dialog>
  </div>
</template>

<script>
import { OrderDetailControllerService } from "../../api/services/OrderDetailControllerService";
import { ElMessage } from "element-plus";
import { formatTimestamp } from "../util/TimeUtil.js";

export default {
  data() {
    return {
      orderList: [],
      searchName: '',
      pagination: {
        page: 1,  // 当前页码
        limit: 10, // 每页行数
        total: 0   // 总记录数
      },
      detailDialogVisible: false,
      orderDetail: {}
    }
  },
  created() {
    this.loadOrderList()
  },
  methods: {
    formatTimestamp,
    async loadOrderList() {
      const res = await OrderDetailControllerService.getOrderByPage(
          this.searchName,
          this.pagination.page,
          this.pagination.limit
      )
      if (res.code === 0) {
        this.orderList =res.data 
        this.pagination.total = res.count 
      } else {
        ElMessage.error(res.msg || '加载订单列表失败')
      }
    },
    handleSizeChange(val) {
      this.pagination.limit = val
      this.loadOrderList()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.loadOrderList()
    },
    async showOrderDetail(row) {
      const res = await OrderDetailControllerService.getOrderById(row.orderId);
      if (res.code === 0) {
        this.orderDetail = res.data 
        this.detailDialogVisible = true;
      } else {
        ElMessage.error(res?.msg || '获取订单详情失败');
      }
    },
    handleClear() {
      this.searchName = '';
      this.loadOrderList()
    }
  }
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}

.el-button {
  margin-left: 10px;
}

.order-detail-form {
  padding: 20px;
}

.order-detail-form .el-input[disabled] {
  background-color: #f9f9f9;
  color: #333;
}

.order-detail-form .el-form-item {
  margin-bottom: 22px;
}
</style>
